<template>
  <div class="answers_users">

    <ul class="bubble_list">
      <li v-for="user in answersData.data" :key="user.userId">

        <div class="ban_list_right">
          <div style="margin-left:10px;margin-right:10px;">
            <div class="header_first" style="padding-left: 1px">
              <div style="width: 97px">
                <h2 style="text-align: left; font-size: 22px; margin-top: 0.7rem">
                  {{ formatDisplayName(user.displayName) }}</h2>
                <template v-if="user.provinceLeader">
                  <h4 style="text-align: left;"> &nbsp; </h4>
                </template>
                <template v-else>
                  <h4 style="text-align: left;">{{ user.ygId }}</h4>
                </template>
              </div>

              <div class="dmemtopDiv">
              </div>

              <img :src="userImg" alt="头像"/>
            </div>

            <div class="phone_and_mail" style="padding-left: 1px">
              <div style=" width: 77%">
                <span style="height: 31px; font-size: 13px;">{{ user.positionForDisplay }}</span>
              </div>

              <div style="width: 30px; height:30px; display: flex" v-if="user.mobile">
                <img src="../../../assets/static/image/dz/dmemtel.png" alt="电话"
                     style=" width: 20px; height: 20px; margin-left: -3px; margin-top: 6px"/>
                <span style="height: 31px; line-height: 35px; font-size: 13px">{{ user.mobile }}</span>
              </div>

              <div style="width: 30px; height: 30px; display: flex" v-if="user.email">
                <img src="../../../assets/static/image/dz/dmemmail.png" alt="email"
                     style="width: 20px; height: 20px; margin-left: -3px; margin-top: 6px"/>
                <span style="height: 31px; line-height: 31px; font-size: 13px">{{ user.email }}</span>
              </div>
            </div>


            <!--基本信息栏-->
            <div class="headLabel" v-if="user.partyDate && user.toFullMembersDate">
              <span v-if="user.partyDate && user.toFullMembersDate" style="font-weight: bold; float: left; padding: 5px 5px;">
                <span class="red-line"></span>基本信息
              </span>
            </div>

            <div class="party-member-content" v-if="user.partyDate && user.toFullMembersDate">
              <div class="basic_info" v-if="user.partyWorker" style="width: 100%; display: flex">
                <span style="width: 100%;">
                  党建工作人员：专职
                </span>
              </div>

              <div class="basic_info" v-if="user.partyWorker" style="width: 100%; display: flex">
                <span style="width: 100%">
                  加入党建工作时间：{{ formatDate(user.joinDjWorkTime) }}
                </span>
              </div>

              <div class="basic_info" v-if="user.partyDate" style="width: 100%; display: flex">
                <span style="width: 100%">
                  入党时间：{{ formatDate(user.partyDate) }}
                </span>
              </div>

              <div class="basic_info" v-if="user.toFullMembersDate" style="width: 100%; display: flex">
                <span style="width: 100%">
                  转正时间：{{ formatDate(user.toFullMembersDate) }}
                </span>
              </div>

              <div class="basic_info" v-if="user.pioneerPost" style="width: 100%; display: flex">
                <span style="width: 100%">
                   <template v-if="user.pioneerPost">先锋岗：{{ chinaConversion(user.pioneerPost) }}</template>
                </span>
              </div>
            </div>


            <!--所属党组织-->
            <div class="headLabel">
              <span style="font-weight: bold;  float: left; padding: 5px 0 5px 5px;">
                <span class="red-line"></span>所在党支部
              </span>
            </div>

            <div class="party-member-content">
              <div class="basic_info" style="width: 100%; display: flex">
                <span style="width: 100%">
                  <span style="font-size:0; line-height: 20px">
                    <span @click="showDepts(user.orgName,15)"
                          style="color: black; font-size: 13px;">
                      {{ user.orgShortName }}
                    </span>
                  </span>
                </span>
              </div>


              <div class="basic_info" v-if="user.orgSj" style="width: 100%; display: flex">
                <span style="width: 100%">
                   {{ user.orgSj }}：
                  <template v-if="user.dwsj">
                      <span @click="showUser(user.dwsj, 15)"
                            style="color: black; font-size: 13px;">{{ user.dwsj }}</span>
                  </template>
                  <template v-else>-</template>
                </span>
              </div>

              <div class="basic_info" v-if="user?.dutyList?.length > 0"
                   style="width: 100%; display: flex; padding: 5px 0;">
                <div style="font-size: 13px; width: 100%; display: flex">
                  <div style="width: 40%; ">所属责任区：</div>
                  <div style="width: 80%; margin-right: 20px ">
                    <span v-for="(duty, index) in user.dutyList" :key="index">
                      <span v-if="index !== 0">、</span>
                      {{ duty.typeName }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="basic_info" style="width: 100%; padding: 5px 0;">
                <template v-if="user?.commandosList?.length > 0">
                  <div style="font-size: 13px; width: 100%; display: flex">
                    <span>
                      所属突击队：
                    </span>
                    <div style="width: 60%; flex-grow:1  ">
                      <span v-for="(commandos, index) in user.commandosList" :key="index">
                        <span v-if="index !== 0">、</span>
                        {{ commandos.typeName }}
                      </span>
                    </div>
                  </div>
                </template>
              </div>
            </div>


            <!--所属网格-->
            <div class="headLabel" v-if="user?.gridList?.length > 0">
              <span style="font-weight: bold; float: left; padding: 5px 5px;">
                <span class="red-line"></span>所属网格
              </span>
            </div>

            <div class="party-member-content" v-if="user?.gridList?.length > 0">
              <div class="basic_info" style="width: 100%;">
                <span v-for="(grid, index) in user.gridList" :key="index">
                  {{ grid.typeName }} <br>
                </span>
              </div>
            </div>
          </div>
        </div>


      </li>
    </ul>
  </div>
</template>

<script>
import {charPattern, chinaShow, isPartTimeShow} from '@/common/util'
import userImg from "@/assets/image/user.png";
import {setQueryDepts, setQueryUsers} from "@/utils/setChatStoreData";
import AesGcm from "@/utils/aesgcm";

export default {
  name: 'AnswersQueryUsers',
  props: ['answersData'],
  data() {
    return {
      userImg,
      photoURL: ''
    }
  },
  methods: {
    formatDisplayName(name) {
      const strArr = [...name];
      return strArr.length === 2 ? strArr.join('　') : name;
    },
    showDepts(orgName, size) {
      setQueryDepts(this, orgName, size);
    },
    showUser(userName, size) {
      setQueryUsers(this, userName, null, size);
    },
    formatDate(data) {
      return !data ? '-' : data.split(" ")[0];
    },
    charConversion(text) {
      return charPattern(text);
    },
    chinaConversion(text) {
      return chinaShow(text);
    },
    isPartTimeConversion(text) {
      return isPartTimeShow(text);
    }
  }
}

</script>
<style type="text/css">
.ban_list_right .red-line {
  display: inline-block;
  width: 4px;
  height: 12px;
  background: #ff0000;
  margin-right: 12px;
  margin-top: 10px;
  border-radius: 5px;
}
</style>
